<template>
    <div>
        <el-page-header @back="goBack" content="收款单详情"></el-page-header>
        <div class="common_line"></div>
        <el-form ref="addForm" :model="addForm" label-width="auto" style="margin-top: 20px;width: 85%;">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="订单类型:">
                        <div>{{ addForm.record_type_name }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="客户:">
                        <div>{{ customer_name }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="日期:" >
                        <div>{{ addForm.orders_date }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="经办人:">
                        <div>{{ handler_name }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22">
                    <el-form-item label="选择单据:">
                        <!-- <div @click="addOrder" class="add_order">添加单据</div> -->
                        <el-table :data="selectOrders" border style="width: 100%" :key="tableKey">
                            <el-table-column label="序号" align="center" width="60" prop="index" />
                            <el-table-column label="订单编号" align="center" prop="order_no" />
                            <!-- <el-table-column label="开单日期" align="center" prop="order_date" /> -->
                            <el-table-column v-if="addForm.record_type===1" label="未收款" align="center" prop="rightValue" />
                            <el-table-column v-if="addForm.record_type===1" label="本次收款" align="center" prop="cur_money" />
                            <el-table-column v-if="addForm.record_type===2" label="未退款" align="center" prop="rightValue" />
                            <el-table-column v-if="addForm.record_type===2" label="本次退款" align="center" prop="cur_money" />
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item :label="addForm.record_type===1?'本次收款金额:':'本次退款金额:'">
                        <div>{{ '￥'+addForm.orders_fee }}</div>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="结算账户:">
                        <div>{{ addForm.pay_type_name }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="22">
                    <el-form-item label="备注:">
                        <div>{{ addForm.remark }}</div>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import { getReceivePaymentInfo } from "@/api/cooperate";

export default {
    name: 'receiveOrderInfo',
    data() {
        return {
            addForm: {
                corp: '',
                customer: '',
                handler_user: '',
                orders_date: '',
                orders_fee: '0.00',
                pay_type: 2,
                record_type: 1, //1收款--销售开单|2付款--销售退单
                remark: '',
                order_relations: []
            },
            customer_name: '',
            handler_name: '',
            payTypes: [
                {label: '微信', value: 2},
				{label: '支付宝', value: 5},
				{label: '现金', value: 1},
				{label: '银行转账', value: 3},
				{label: '其他', value: 4}
            ],
            selectOrders: [],
            tableKey: 1
        }
    },
    props: {
        corpId: {
            type: Number
        },
        editId: {
            type: Number
        }
    },
    mounted() {
        this.addForm.corp = this.corpId
        this.getOrderInfo()
    },
    methods: {
        goBack() {
            this.$emit('hidden', '')
        },
        handlePayTypeName(val) {
            let name = ''
            this.payTypes.forEach(item => {
                if (val === item.value) {
                    name = item.label
                }
            })
            return name
        },
        // 获取详情
        getOrderInfo() {
            let _this = this
            getReceivePaymentInfo(this.editId, {corp: this.addForm.corp}).then(res => {
                let info = res.data.data
                _this.customer_name = info.customer_detail?info.customer_detail.customer_name:''
                _this.handler_name = info.handler_user_detail?info.handler_user_detail.username:''
                info.record_type_name = info.record_type===1?'销售单':'退货单'
                info.pay_type_name = _this.handlePayTypeName(info.pay_type)
                if (info.record_type === 1){
                    _this.selectOrders = info.order_relations_detail.filter((item, index) => {
                        item.index = index+1
                        item.order_no = item.related_order_no
                        item.rightValue = item.pending_payment||0
                        item.cur_money = item.orders_fee
                        item.id = item.related_order_id
                        return item
                    })
                }else{
                    _this.selectOrders = info.return_order_relations_detail.filter((item, index) => {
                        item.index = index+1
                        item.order_no = item.related_order_no
                        item.rightValue = item.pending_payment||0
                        item.cur_money = item.orders_fee
                        item.id = item.related_order_id
                        return item
                    })
                }
                _this.addForm = info
            })
        }
    }
}
</script>

<style lang="less" scoped>
    @import '../../style/mixin.less';
    .add_order {
        cursor: pointer;
        font-size: 14px;
        padding-left: 10px;
        color: @blue;
    }
    .order_lists {
        padding: 0 10px;
        max-height: 400px;
        overflow-y: auto;
    }
    .inner_input {
        border: 1px solid #ddd;
        padding: 8px 5px;
    }
</style>